<template>
	<navBar></navBar>
	<view class="content">
		<view class="refer">
			<text class="fonse">在线评估</text>
			<text class="text">提交信息，快速获取评估价</text>
			<view class="mobile">

				<view class="container">
					<uni-section title="表单校验" type="line">
						<view class="example">
							<!-- 基础表单校验 -->
							<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
								<uni-forms-item label="姓名" required name="name">
									<input type="text" v-model="valiFormData.name" placeholder="请输入姓名(必填)">
								</uni-forms-item>
								<uni-forms-item label="年龄" required name="age">
									<input type="text" v-model="valiFormData.age" placeholder="请输入年龄(必填)">
								</uni-forms-item>
								<uni-forms-item label="评估车型" name="vehicleModel">
									<input type="text" v-model="valiFormData.vehicleModel" placeholder="请输入车型">
								</uni-forms-item>
								<uni-forms-item label="公里数" name="kilometre">
									<input type="text" v-model="valiFormData.kilometre" placeholder="请输入公里数">
								</uni-forms-item>
								<uni-forms-item label="上牌时间" name="single">
									<view class="example-body">
										<uni-datetime-picker type="date" :clear-icon="false" v-model="single"
											@maskClick="maskClick" />
									</view>
								</uni-forms-item>
							</uni-forms>
							<button type="primary" @click="submit('valiForm')">提交</button>
						</view>
					</uni-section>

				</view>

			</view>
		</view>

		<tabControl></tabControl>

		<view class="vehicle">
			<view class="advantage">
				选择在腾发卖车的好处
			</view>
			<image class="advantage_img" src="https://m.tf2sc.cn/assets/img/sellCar_good.17aac9b7.png" mode=""></image>
			<view class="texts">
				<view class="item">
					<image
						src=""
						mode=""></image>
					<view class="text_all">
						<text class="titlei">卖价高,最快可当天拿钱</text>
						<text class="span"> (卖价高，最快可当天完成过户，当天拿钱) </text>
					</view>
				</view>
				<view class="item">
					<image
						src=""
						mode=""></image>
					<view class="text_all">
						<text class="titlei"> 卖车过程透明，省时省心 </text>
						<text class="span"> (卖车过程透明看得到，专人办理卖车服务) </text>
					</view>
				</view>
				<view class="item">
					<image
						src=""
						mode=""></image>
					<view class="text_all">
						<text class="titlei">实体展厅卖车信得过</text>
						<text class="span"> (20年实体经营，交易有保障) </text>
					</view>
				</view>
			</view>

			<view class="title_end">
				400-060-6777
			</view>
			
			
			<view class="vehicle_title">
				<text class="pitch_title">常见问题</text>
			</view> 
			
			<view class="issue_item">
				<view class="title">
					 卖车需要准备哪些资料？ 
				</view>
				<view class="texts">
					 需要先在网站提供您的联系电话，车辆品牌、型号等基本信息。待服务人员联系您后，在约定时间内准备好 <br>
					  1、身份证； 6、车示标（环保标、检字标、交强险标）； <br>
					   2、行驶证； 7、交强险单； <br>
					    3、车辆登记证； 8、购置税本及购置税发票； <br>
						 4、车辆钥匙； 9、购车发票/最近一次过户发票； <br>
						  5、说明书保养手册 
				</view>
			</view>
			
			<view class="issue_item">
				<view class="title">
					 卖车具体的流程是怎么样的呢？ 
				</view>
				<view class="texts">
					 需要先在网站提供您的联系电话，车辆品牌、型号等基本信息。待服务人员联系您后，在约定时间内准备好 <br>
					  1、提交资料及联系方式。  <br>
					    2、预约开车到店检测车辆或直接来店检测车辆。  <br>
					     3、现金交易结款。  <br>
						  4、办理过户手续。  <br>
						 
				</view>
			</view>
			
			
			<view class="issue_item">
				<view class="title">
					 通过腾发出售车辆需要什么费用？
				</view>
				<view class="texts">
					  在腾发寄售车辆，卖车快，卖价高。整个服务过程透明。评估师给参考售价，明确收费内容，同意后签订寄售协议。卖出的车辆同样也享受腾发的质保服务。 
				</view>
			</view>
			
			<view class="issue_item">
				<view class="title">
					 通过腾发卖车的好处？
				</view>
				<view class="texts">
					  卖价高：3万余平的实体展厅，近5000平独立的售后服务中心。 
				</view>
			</view>
			
			
			
			
		</view>

	</view>
</template>

<script setup>
	import navBar from "../../components/navBar.vue";
	import tabControl from "../../components/tabControl.vue";
	import {

	} from "../../ajax/ajax.js";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from "vue";


	const brands = reactive([]);


	const valiFormData = reactive({
		name: '',
		age: '',
		single: '',
		vehicleModel: '',
		kilometre: '',
	})



	onLoad(() => {
		console.log('初始化时执行')
		getApp().globalData.index = 3;
	})
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		margin-top: -100rpx;
		// height: 800rpx;
		// border: 1px solid;

		.refer {
			width: 750px;
			// height: 320rpx;
			background-image: url("../../static/home_guche.6eb9a788.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: 0 0;

			.fonse {
				display: block;
				width: 210rpx;
				height: 80rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: 600;
				color: #0055ff;
				line-height: 80rpx;
				padding-top: 40rpx;
			}

			.title {
				font-size: 10rpx;
				font-weight: 600;
				margin: 20rpx 0;
				padding: 0 20rpx;
				border-left: 10rpx solid #0055ff;
			}

			.text {
				margin: 2.53333vw 0 8.13333vw 4vw;
				height: 4.4vw;
				font-size: 3.2vw;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #5685fe;
				line-height: 4.4vw;
			}

			.mobile {
				display: flex;
				width: 660rpx;
				// height: 400rpx;
				// border: 1px solid;
				margin: 85rpx 0 0 40rpx;
				background-color: #fff;
				box-shadow: 2rpx 2rpx 10rpx #999;


				:deep(.uni-forms-item__label) {
					width: 150rpx !important;
				}

				.example {
					width: 570rpx;
					padding: 15px;
					background-color: #fff;

					input {
						width: 400rpx;
						height: 40rpx;
						// border: 1px solid;
						margin-top: 20rpx;

					}

					.example-body {
						background-color: #fff;
						// padding: 10px;
						border: 0 !important;
					}
				}

				.segmented-control {
					width: 600rpx !important;
					border: 1px solid !important;
					margin-bottom: 15px;
				}

				.button-group {
					width: 600rpx;
					border: 1px solid red;
					margin-top: 15px;
					display: flex;
					justify-content: space-around;
				}

				.form-item {
					display: flex;
					align-items: center;
				}

				.button {
					display: flex;
					align-items: center;
					height: 35px;
					margin-left: 10px;
				}

			}


		}

		.vehicle {
			width: 750rpx;
			
			.vehicle_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			
				.span {
					font-size: 10rpx;
					color: #999;
				}
			}

			.advantage {
				    margin: 24vw 22.4vw 6.4vw 22.66667vw;
				    width: 66.66667vw;
				    height: 6.66667vw;
				    font-size: 4.8vw;
				    font-family: PingFangSC-Medium,PingFang SC;
				    font-weight: 500;
				    color: #333;
				    line-height: 6.66667vw;
			}
			
			.advantage_img {
				    margin: 0 21.33333vw 0 23.73333vw;
				    width: 46.93333vw;
				    height: 25.6vw;
			}
			
			.texts {
				    float: left;
				    margin: -4vw 0 0 32rpx;
				    width: 91.73333vw;
				    height: 51.86667vw;
				    background: #f5f6fa;
				    border-radius: 1.86667vw;
				    border: 1px solid #f5f6fa;
					
					
					.item {
						    display: flex;
							align-items: center;
						    width: 100%;
						    height: 17.33333vw;
							
							image {
								display: block;
								margin: 0 40rpx;
								    width: 80rpx;
									height: 50rpx;
							}
							
							.text_all {
								width: 480rpx;
								
								.titlei {
									display: block;
									font-size: 29rpx;
									color: #515151;
								}
								.span  {
									font-size: 25rpx;
									color: #515151;
								}
							}
					}
			}

			.title_end {
				margin: 53.33333vw 32.26667vw 6.66667vw 33.6vw;
				    height: 5.33333vw;
				    font-size: 3.73333vw;
				    font-family: PingFangSC-Regular,PingFang SC;
				    font-weight: 400;
				    color: #5685fe;
				    line-height: 5.33333vw;
			}
		
			.issue_item {
				    overflow: hidden;
				    margin: 2.66667vw 0 1.33333vw 0;
				    width: 100%;
				    height: 67.2vw;
				    background: url(https://m.tf2sc.cn/assets/img/sellCar_bg1.c8d40d6e.png) no-repeat 100%;
				    background-size: cover;
					
						&:nth-last-child(3) {
							overflow: hidden;
							margin: 4.66667vw 0 1.33333vw 0;
							width: 100%;
							height: 67.2vw;
							background: url(https://m.tf2sc.cn/assets/img/sellCar_bg3.7f7dcbb1.jpg) no-repeat 100%;
							background-size: cover;
							box-shadow:2rpx 2rpx 15rpx #d0d0d0 ;
						}
						&:nth-last-child(2) {
							overflow: hidden;
							margin: 4.66667vw 0 2.33333vw 0;
							width: 100%;
							height: 67.2vw;
							background: url(https://m.tf2sc.cn/assets/img/sellCar_bg2.3a590608.jpg) no-repeat 100%;
							background-size: cover;
							box-shadow:2rpx 2rpx 10rpx #d0d0d0 ;
						}
						&:nth-last-child(1) {
							overflow: hidden;
							margin: 4.66667vw 0 1.33333vw 0;
							width: 100%;
							height: 67.2vw;
							background: url(https://m.tf2sc.cn/assets/img/sellCar_bg4.54067d77.jpg) no-repeat 100%;
							background-size: cover;
							box-shadow:2rpx 2rpx 10rpx #d0d0d0 ;
						}
					
					.title {
						margin-top: 8.13333vw;
						margin-left: 5.06667vw;
					}
					
					.texts {
						    margin-left: 5.06667vw;
						    margin-top: 2.26667vw;
						    width: 82.66667vw;
						    height: 41.06667vw;
						    font-size: 3.2vw;
						    font-family: PingFangSC-Regular,PingFang SC;
						    font-weight: 400;
						    color: #525b78;
						    line-height: 5.86667vw;
							background-color: transparent;
							border: 0;
					}
			}
		
		}
	}

	.pitch_title {
		display: block;
		font-size: 34rpx;
		font-weight: 600;
		margin: 20rpx 0;
		padding: 0 20rpx;
		border-left: 10rpx solid #0055ff;

	}
</style>